<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <h2>首页概览</h2>
      <p>这是后台管理系统的首页，您可以在这里查看系统的主要功能入口和简要信息。</p>
    </el-card>
    
    <div class="quick-actions">
      <h3>快速操作</h3>
      <div class="action-buttons">
        <el-button type="primary" icon="el-icon-plus" @click="$router.push('/user')">
          用户管理
        </el-button>
        <el-button type="primary" icon="el-icon-user-solid" @click="$router.push('/role')">
          角色管理
        </el-button>
        <el-button type="primary" icon="el-icon-lock" @click="$router.push('/permission')">
          权限管理
        </el-button>
      </div>
    </div>
    
    <div class="system-info">
      <h3>系统信息</h3>
      <el-table :data="systemInfoData" style="width: 100%">
        <el-table-column prop="key" label="项目" width="180"></el-table-column>
        <el-table-column prop="value" label="值"></el-table-column>
      </el-table>
    </div>
    
    <div class="recent-activities">
      <h3>最近活动</h3>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in recentActivities"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 系统信息数据
const systemInfoData = ref([
  { key: '系统名称', value: 'Vue3+TS后台管理系统' },
  { key: '当前版本', value: '1.0.0' },
  { key: '开发框架', value: 'Vue 3 + TypeScript' },
  { key: 'UI组件库', value: 'Element Plus' },
  { key: '构建工具', value: 'Vite' },
  { key: '状态管理', value: 'Pinia' },
  { key: '路由管理', value: 'Vue Router' },
  { key: '样式预处理', value: 'Less' }
])

// 最近活动数据
const recentActivities = ref([
  { time: '今天 09:30', content: '管理员登录系统' },
  { time: '今天 10:15', content: '新增用户 "user123"' },
  { time: '昨天 14:20', content: '修改角色 "编辑" 的权限' },
  { time: '昨天 16:45', content: '删除过期数据' },
  { time: '2天前', content: '系统例行维护' },
  { time: '3天前', content: '更新系统版本到 1.0.0' }
])

// 组件挂载时的初始化
onMounted(() => {
  // 这里可以添加一些初始化逻辑
  console.log('首页组件已挂载')
})
</script>

<style scoped lang="less">
.home-container {
  padding: 20px 0;
  
  .welcome-card {
    margin-bottom: 30px;
    h2 {
      margin-bottom: 10px;
      color: #304156;
    }
    p {
      color: #606266;
    }
  }
  
  .quick-actions {
    margin-bottom: 30px;
    h3 {
      margin-bottom: 15px;
      color: #304156;
    }
    .action-buttons {
      display: flex;
      gap: 15px;
      .el-button {
        padding: 12px 24px;
      }
    }
  }
  
  .system-info {
    margin-bottom: 30px;
    h3 {
      margin-bottom: 15px;
      color: #304156;
    }
  }
  
  .recent-activities {
    h3 {
      margin-bottom: 15px;
      color: #304156;
    }
    .el-timeline {
      padding-left: 20px;
    }
    .el-timeline-item__content {
      color: #606266;
    }
  }
}
</style>